/**
 * 留言板（react 组件形式）
 * 需求：
 * 板块一：添加留言
 *   1. 输入框
 *   2. 提交按钮
 * 板块二：显示留言列表
 *   清空按钮
 *   留言列表项
 *     1. 留言者
 *     2. 留言内容
 *     3. 留言时间
 *     4. 删除按钮
 * 逻辑要求：
 *  1. 输入框：输入内容
 *  2. 提交按钮：提交留言
 *  3. 清空按钮：清空留言
 *  4. 留言列表项：显示留言列表项
 *  5. 删除按钮：删除留言
 * 提示：
 *   输入框使用 tdesign-react 提供的 Input 组件, 导入方式为 import { Input } from 'tdesign-react'
 *   按钮使用 tdesign-react 提供的 Button 组件, 导入方式为 import { Button } from 'tdesign-react'
 *   留言列表使用 tdesign-react 提供的 List 组件, 导入方式为 import { List } from 'tdesign-react'
 *   留言列表项使用 tdesign-react 提供的 ListItem 组件, 导入方式为 const { ListItem } = List
 *   时间使用 new Date().toLocaleString()
 *
 * 提示：
 *   当前的 NoteBoard 组件没有展示到页面上，需要模仿 NineNineTable 组件展示到页面上
 *
 * 思路：
 */

// ctrl + 鼠标左键单击导入的模块， 我看了 但是看不懂，好
/**
 * export declare const Input declare 声明的意思，声明 Input的类型
 * 后面接了一个 InputProps props 还记得不嗯，当你用一个组件，然后要给这个组件传值，在这个组件里面，会用到这个props，
 * 比如，父组件 <Parent /> 里面的代码是 return <Child thisIsAValue />
 * 在子组件中 <Child /> 代码是 props == { thisIsAValue }，也就是说，你传什么类型的值由子组件决定，所以这个 InputProps 就是子组件所接收值的类型
 * export interface InputProps extends TdInputProps 这里的 interface 是接口的意思，也可以理解为声明，extends 继承，InputProps 继承了 TdInputProps
 * 
 */
/**
     * 输入框值发生变化时触发。参数 `trigger=initial` 表示传入的数据不符合预期，组件自动处理后触发 change 告知父组件。如：初始值长度超过 `maxlength` 限制
     */
    /**
     * 
onChange?: (value: InputValue, context?: {
  e?: FormEvent<HTMLInputElement> | MouseEvent<any> | CompositionEvent<HTMLDivElement>;
  trigger: 'input' | 'initial' | 'clear';
}) => void;*/
import { useEffect, useState, } from 'react'
import { Button, Input, List, MessagePlugin, Empty, RadioGroup, Radio } from 'tdesign-react'

import moment from 'moment'

// 使用示例
import { apis, ApiRequest } from '@/service'
import './index.less'

type UserType = {
  userName: string,
  userId: string,
}

type NoteItemType = {
  author: string,
  content: string,
  datetime: string,
  id?: string,
  // deleteTag: string, // 标志留言是否被删除
}

const { ListItem } = List

const {
 practiceService: {
  getUserList,
  getNoteList, // 获取留言列表
  insertNote,
  deleteNote, // 删除留言
  deleteAllNote, // 删除所有留言
 }
} = apis

const NoteBoard = () => {

  // 存用户列表
  const [userList, setUserList] = useState<UserType[]>([])
  const [noteList, setNoteList] = useState<NoteItemType[]>([])

  const [currentAuthor, setCurrentAuthor] = useState<UserType>({ userId: '', userName: '' })
  const [inputValue, setInputValue] = useState<string>('')

  useEffect(() => {
    getUserListFnc()
    getNoteListFnc()
  }, [])

  /**
   * 获取用户列表
   */
  const getUserListFnc = () => {
    ApiRequest({ api: getUserList }).then((res: any) => {
      const { code = 'error', data = [], note = '' } = res
      if (code == 'ok') {
        setUserList(data)
        setCurrentAuthor(data[0])
      } else {
        MessagePlugin.error(note, 2000)
      }
    })
  }

  /**
   * 获取留言列表
   */
  const getNoteListFnc = () => {
    ApiRequest({ api: getNoteList }).then((res: any) => {
      const { code = 'error', data = [], note = '' } = res
      if (code == 'ok') {
        setNoteList(data)
      } else {
        MessagePlugin.error(note, 2000)
      }
    })
  }

  const onUserChange = (event: any) => {
    setCurrentAuthor(userList.filter((item: UserType) => item.userId == event)[0])
  }

  const onSubmit = () => {
    if (currentAuthor.userName === '') {
      MessagePlugin.info('请选择留言人', 2000)
      return
    }
    if (inputValue === '') {
      // TODO 提示别人，要输入值
      MessagePlugin.info('请输入留言内容', 2000)
      return
    }
    const _noteItem = {
      author: currentAuthor.userName,
      content: inputValue,
      datetime: moment().format('YYYY-MM-DD HH:mm:ss'),
    }
    ApiRequest({ api: insertNote, params: _noteItem }).then((res: any) => {
      const { code = 'error', status = '0', note = '' } = res
      if (code == 'ok') {
        // setNoteList([...noteList, { ..._noteItem, id : status }])
        getNoteListFnc()
      } else {
        MessagePlugin.error(note, 2000)
      }
    })
  }

  const clearAllNote = () => {
    // let _noteList = [...noteList]
    // _noteList.forEach((item: NoteItemType, index: number) => {
    //   item.deleteTag = '1'
    // })
    // setNoteList(_noteList)
    ApiRequest({ api: deleteAllNote }).then((res: any) => {
      const { code = 'error', status = '0', note = '' } = res
      if (code == 'ok') {
        getNoteListFnc()
      } else {
        MessagePlugin.error(note, 2000)
      }
    })
  }

  const onItemDelete = (index: number, id: string) => {
    ApiRequest({ api: deleteNote, params: { id } }).then((res: any) => {
      const { code = 'error', data = [], note = '' } = res
      if (code == 'ok') {
        getNoteListFnc()
        MessagePlugin.success(note, 2000)
      } else {
        MessagePlugin.error(note, 2000)
      }
    })
  }

  return <div className='note-board'>
    <div className='input-block'>
      <div className='select-user-label'>请选择留言人</div>
      <RadioGroup className='select-user-radio' onChange={onUserChange} value={currentAuthor.userId}>
        {userList.map((item: UserType) => {
          return <Radio value={item.userId} key={item.userId}>{item.userName}</Radio>
        })}
      </RadioGroup>
      <Input className='input-block-input' clearable placeholder='请输入留言内容' onChange={(value) => { setInputValue(value) }} />
      <Button className='input-block-button' onClick={onSubmit}>提交</Button>
      <Button className='input-block-button' onClick={clearAllNote}>清空留言</Button>
    </div>
    <List className='note-list-block'>
    {
      noteList.length > 0 ? noteList.map((item: NoteItemType, index: number) => {
        return <ListItem
          className='note-list-item'
          key={index}
          action={<Button onClick={() => { onItemDelete(index, item.id || '') }}>删除</Button>}
        >
          <div className='note-list-item-info'>
            <div className='note-list-item-name'>{item.author}</div>
            <div className='note-list-item-content'>
              <div className='content'>{item.content}</div>
              <div className='datetime'>{item.datetime}</div>
            </div>
          </div>
        </ListItem>
      }) : <Empty className='note-list-empty' />
    }
    </List>
  </div>

}

export default NoteBoard
